<template>
    <div id="red">
      <Table :columns="th" :data="td"></Table>
      <Page class="page" v-show="total > 0" :total="total" :page-size="page_size" @on-change="changePage" />
    </div>
</template>

<script>
export default {
  name: 'red',
  data () {
    let self = this
    return {
      th: [
        {
          key: 'id',
          title: '红包id'
        },
        {
          key: 'user',
          title: '所属用户',
          render: (h, params) => {
            return h('div', [
              h('Avatar', {
                props: {
                  src: params.row.owner_header
                },
                style: {
                  display: 'block',
                  marginTop: '3px'
                }
              }),
              h('p', params.row.owner_nickname)
            ])
          }
        },
        {
          key: 'type',
          title: '红包类型',
          render: (h, params) => {
            return h('p', self.typeToString(params))
          }
        },
        {
          key: 'title',
          title: '红包标题'
        },
        {
          key: 'money',
          title: '红包金额'
        },
        {
          key: 'number',
          title: '红包数量',
          render: (h, params) => {
            return h('p', '已发' + params.row.numbered + ' / ' + '总数' + params.row.number)
          }
        },
        {
          key: 'handle',
          title: '操作',
          render: (h, params) => {
            return h('Button', {
              props: {
                size: 'small',
                type: 'error'
              },
              on: {
                click: () => {
                  self.delete(params.row.id)
                }
              }
            }, '删除')
          }
        }
      ],
      // 数据
      td: [],
      // 数据总数
      total: 0,
      // 每页数据条数
      page_size: 10,
      // 当前页码
      page: 1
    }
  },
  mounted () {
    this.getTotal()
    this.getList()
  },
  methods: {
    /**
     * 红包列表
     */
    getList () {
      this.$get('red/getManageList', {
        limit: [(this.page - 1) * this.page_size, this.page_size]
      })
        .then((res) => {
          let { code, data } = res.data
          if (code === 0) {
            this.td = data
          } else {
            this.td = []
          }
        })
    },
    /**
     * 获取红包总数
     */
    getTotal () {
      this.$get('red/getManageTotal')
        .then((res) => {
          let { code, data } = res.data
          if (code === 0) {
            this.total = parseInt(data)
          }
        })
    },
    /**
     * 页面切换
     */
    changePage (page) {
      this.page = page
      this.getList()
    },
    /**
     * 红包类型转字符串
     */
    typeToString (params) {
      let { type, red_type } = params.row
      let str_type = ''
      let str_red_type = ''
      if (type === '1') {
        str_type = '普通红包'
      } else {
        str_type = '手气红包'
      }
      if (red_type === 'default') {
        str_red_type = '默认红包'
      } else if (red_type === 'image') {
        str_red_type = '图片红包'
      } else {
        str_red_type = '视频红包'
      }
      return str_red_type + ' / ' + str_type
    },
    /**
     * 删除红包
     */
    delete (red_id) {
      this.$Modal.confirm({
        title: '提示',
        content: '红包内剩余额将退回给用户，确认删除？',
        onOk: () => {
          this.$post('red/del', {
            red_id
          })
            .then((res) => {
              let { code, err_msg } = res.data
              if (code === 0) {
                this.getTotal()
                this.getList()
              } else {
                this.$Message.error({ content: err_msg })
              }
            })
        }
      })
    }
  }
}
</script>

<style scoped lang="less">
  #red .page{
    margin-top: 10px;
  }
</style>
